<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src='./city.js'></script>
    <style>
        select{text-align: center;}
    </style>
</head>

<body>
    直辖市/省：
    <select name="" id="provice">
        <option>---请选择---</option>
    </select>&emsp;&emsp;
    地域名：
    <select name="" id="city">
        <option>---请选择---</option>
    </select>&emsp;&emsp;
    区、县：
    <select name="" id="area">
        <option>---请选择---</option>
    </select>

    <script>
        $(function () {
            // console.log( $(citys)) 
            var provice=''
            for(i in citys){
               // console.log(citys[i])//将数组里的所有对象循环
                provice+=` <option value='${i}'>${citys[i].name}</option>`
            }
            $("#provice").append(provice)
            $("#provice").change(function () {
                $("#city option:gt(0)").remove() //清除上一次选择的内容
                var arr = citys[$(this).val()].city
                // console.log(arr) //对象里的arr循环（点击得到）
                var strcity = ''
                for (var i = 0; i <arr.length; i++) {
                //for(i in arr){
                    strcity +=` <option value='${$(this).val()}-${i}'>${arr[i].name}</option>`
                }
                $("#city").append(strcity)
            })
            $("#city").change(function () {
                $("#area option:gt(0)").remove() //清除上一次选择的内容
                var arr =$(this).val().split('-') //将- 替换成 , ，将字符串转数组
                 //console.log(arr) 
                var area = citys[arr[0]].city[arr[1]].area //获取所有的区、县
                // console.log(area)
                var html = ''
                for (var i = 0; i <area.length; i++) {
                //for(i in arr){
                   html +=` <option>${area[i]}</option>`
                }
                $("#area").append(html)
            })
        })

        // console.log( $(citys))
        // console.log( $(citys)[0].name) //直辖市/省
        // console.log( $(citys)[0].city)
        // console.log( $(citys)[0].city[0])
        // console.log( $(citys)[0].city[0].name) //地域名
        // console.log( $(citys)[0].city[0].area) //所有的区、县
    
    </script>
</body>

</html>